<template>
	<uni-shadow-root>
		<view class="live-wrap">
			<view class="live-cont">
				<view>
					<text class="text-gray">房间信息</text>
				</view>
				<view class="cu-form-group margin-top-xs">
					<view class="title">用户ID</view>
					<input name="input" v-model="livePusher.user_id" disabled />
				</view>
				<view class="cu-form-group">
					<view class="title">直播间号</view>
					<input name="input" v-model="livePusher.live_room" disabled />
				</view>
				<view class="cu-form-group">
					<view class="title">直播名称</view>
					<input name="input" v-model="livePusher.title" disabled />
				</view>
				<!-- <view class="cu-form-group">
					<view class="title">直播密码</view>
					<input type="password" name="input" />
				</view> -->
				<view>
					<text class="text-gray">设置</text>
				</view>
				<view class="cu-form-group margin-top-xs">
					<view class="title">摄像头</view>
					<h-picker :model.sync="ruleForm.camera" :label.sync="camera" :options="cameraOptions" >
						<text>{{camera}}</text>
					</h-picker>
				</view>
				<view class="cu-form-group">
					<view class="title">清晰度</view>
					<h-picker :model.sync="ruleForm.definition" :label.sync="definition" :options="definitionOptions">
						<text>{{definition}}</text>
					</h-picker>
				</view>
				<!-- <view class="cu-form-group">
					<view class="title">服务器</view>
					<input name="input"></input>
				</view> -->
				<view class="cu-form-group">
					<view class="title">直播时间</view>
					<view class="flex flex-direction">
						<input name="input" v-model="livePusher.starttime"></input>
						<text>直播时间前无法开始直播</text>
					</view>
				</view>
			</view>
			<view class="btn-wrap margin-top-sm">
				<button class="cu-btn round bg-red" @click="handleCommit">开始直播</button>
			</view>
		</view>
	</uni-shadow-root>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	import HPicker from "@/components/HPicker"
	export default {
		data() {
			return {
				cameraOptions: [{label:'前置',value:'front'},{label:'后置',value:'back'}],
				definitionOptions: [
					{label:'流畅',value:"SD"},
					{label:'高清',value:"HD" },
					{label:'超清',value:"FHD"}
				],
				ruleForm: {
					camera: 'front',
					definition: 'SD',
				},
				camera: '前置',
				definition: '流畅',
				livePusher:{}
			}
		},
		components: {
			HPicker
		},
		methods: {
			async handleCommit() {
				this.SET_LIVEOPTIONS(this.ruleForm) //存储直播配置
				let query = {
					op: 'y'
				}
				let {
					code,msg
				} = await this.$h.api.liveModel.postLiveState(query)
				if (code === 1) {
					this.$h.router.push({
						path: '/pages/live/pushLive'
					})
				}else{
					this.$h.toast(msg)
				}
			},
			...mapMutations('live', ['SET_LIVEOPTIONS'])
		},
		async created(){
			let {code,msg,data} = await this.$h.api.liveModel.getLive()
			if(data.status===2){
				this.livePusher=data.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.live-wrap {
		width: 100%;
		height: 1040rpx;
		display: flex;
		flex-direction: column;

		.live-cont {
			flex: 1;
			display: flex;
			flex-direction: column;

			.cu-form-group {
				padding: 0;
			}

			.cover-cont {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.btn-wrap {
			height: 80rpx;

			button {
				color: #fff;
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}
</style>
